import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList
} from 'react-native'

import { Header, ListItem, Avatar, Icon } from 'react-native-elements'
import { ListForwardColor } from '~/config/style'
// other
import { rxLogout } from '../../utils/api'
import { pmenus } from './option'
import { HeaderTitle } from '~/components/header'

class Component extends React.Component {
  constructor(props) {
    super(props),
      (this.state = {
        user: {
          name: 'Amy Farha',
          avatar: 'http://bmi.jiantiao8.com:8000/s6/a6.jpg',
          subtitle: 'Vice President',
        },

        sectionData: pmenus
      })
  }

  onClickItem(key) {
    switch (key) {
      case 'LOGOUT':
        this.onLogout()
        break;

      default:
        break;
    }
  }

  // 退出登陆
  onLogout () {
    const { navigation } = this.props

    rxLogout({
      "code":"haomeili",
      "password": "123000"
    }).then((response) => {
      if (response.errno == 0) {
        navigation.navigate('LoginScreen')
      }
    })
  }

  render() {
    let {sectionData} = this.state;

    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <Header
          placement="left"
          centerComponent={ HeaderTitle('个人设置') }
          rightComponent={{ icon: 'home', color: '#fff' }}
        ></Header>

        <SafeAreaView style={{flex: 1}}>
          <SectionList
            sections={sectionData}
            keyExtractor={(item, index) => item + index}
            renderItem={({item}) => this.renderItem(item)}
            ListHeaderComponent={this.renderUser()}
            renderSectionHeader={({section: {title}}) => <Text style={styles.section}></Text>}
          />
        </SafeAreaView>
      </View>
    )
  }

  renderUser() {
    let {user} = this.state;

    return (
      <ListItem bottomDivider>
        <ListItem.Content style={styles.header}>
          <View style={styles.avatar}>
            <Avatar size="large" rounded source={{uri: user.avatar}} />
          </View>

          <View style={{flex: 1, marginLeft: 10}}>
            <ListItem.Title style={{fontWeight: '600'}}>{user.name}</ListItem.Title>
            <ListItem.Subtitle>{user.subtitle}</ListItem.Subtitle>
          </View>
        </ListItem.Content>

        <Icon
          name="chevron-forward-outline"
          type={'ionicon'}
          color={ListForwardColor}
        />
      </ListItem>
    )
  }

  renderItem({key, title, icon}) {
    return (
      <ListItem bottomDivider onPress={ () => this.onClickItem(key) }>
        <Icon name={icon} type={'ionicon'} />
        <ListItem.Content>
          <ListItem.Title>{title}</ListItem.Title>
        </ListItem.Content>
        <Icon
          name="chevron-forward-outline"
          type={'ionicon'}
          color={ListForwardColor}
        />
      </ListItem>
    )
  }
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    margin: 10
  },
  section: {
    height: 8,
    backgroundColor: '#F3F3F3',
  }
});

export default Component;
